import { useMemo, useState } from 'react';
import { theme } from 'antd';
import variables from '@/assets/theme-cfig/variables.module.less';

/**
 * app 配置 开启持久化
 */
export const useThemeStore = () => {
  const [themeName, setThemeNames] = useState('purple'); // 主题名称
  const [themeMode, setThemeModes] = useState('tint'); // 颜色模式
  const element: HTMLElement = document.documentElement;
  const themeConfig = useMemo(() => {
    // 主题配置
    element.className.split(' ').forEach(className => {
      if (/^(dark|tint|umi-theme-.*?)$/.test(className)) {
        element.classList.remove(className);
      }
    });
    element.classList.add(`umi-theme-${themeName}`);
    element.classList.add(themeMode);
    return {
      token: {
        colorPrimary: variables[themeName],
        wireframe: true,
      },
      algorithm:
        themeMode === 'tint' ? theme.defaultAlgorithm : theme.darkAlgorithm,
    };
  }, [element.className, element.classList, themeName, themeMode]);
  const setThemeName = (value: string) => {
    setThemeNames(value);
  };
  const toggleDarkMode = () => {
    setThemeModes(themeMode === 'tint' ? 'dark' : 'tint');
  };
  return {
    themeName,
    themeConfig,
    themeMode,
    setThemeName,
    toggleDarkMode,
  };
};
